<template>
  <div class="dashboarddata">
    <device-header :info="HeadObj"></device-header>
    <my-equipment></my-equipment>
    <div v-for="(value, key) in sensorList" :key="key">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          {{ key }}
        </div>
        <div class="data-con">
          <ul>
            <li v-for="item in value" :key="item.eui">
              <el-card class="box-card">
                <div class="data-con-up">
                    <i class="iconfont icon-yalichuanganqi" :class="item.online?'icon1':'icon2'"></i>
                    <i class="iconfont icon-dianchidianliang"
                    v-if="item.online && item.powerNum <= 30"></i>
                    <div class="num">
                      <p class="guangzhao">{{ item.devValue }}</p>
                      <p>{{ item.devName }}</p>
                    </div>
                </div>
                <div class="data-con-down">
                  <p>EUI：{{ item.eui }}</p>
                </div>
              </el-card>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { $deviceSensorList } from '@/api/index.js'
import MyEquipment from '../../components/MyEquipment.vue'
import DeviceHeader from '../../components/DeviceHeader.vue'
export default {
  data () {
    return {
      HeadObj: {
        type: '',
        text: '设备列表',
        content: '监控所有设备状态。'
      },
      sensorList: []
    }
  },
  name: 'dashboarddata',
  components: { MyEquipment, DeviceHeader },
  mounted () {
    this.getSensorList()
  },
  methods: {
    getSensorList () {
      $deviceSensorList().then((res) => {
        console.log(res)
        this.sensorList = res.data.data
      })
    }
  }
}
</script>

<style scoped lang="less">
.data-con ul {
  width: 100%;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  li {
    list-style: none;
    width: 190px;
    margin-right: 5.8px;
    margin-top: 10px;
    .box-card {
      width: 100%;
      position: relative;
      height: 160px;
      .data-con-up {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        .icon1 {
          font-size: 50px;
          transform: rotate(180deg);
          color: green;
        }
        .icon2 {
          font-size: 50px;
          transform: rotate(180deg);
        }
        .icon-dianchidianliang{
          margin-top: 32px;
          margin-left: -16px;
          color: red;
        }
        .num{
          width: 200px;
          text-align: center;
          height: 20px;
          line-height: 20px;
          font-weight: bold;
          p{
            margin-top: 5px;
          }
        }
      }
      .data-con-down{
        background-color: rgb(219, 219, 219);
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 13px;
        font-weight: bold;
      }
    }
  }
}
</style>
